"use client";

//GLobal
import React, { FC, useEffect } from "react";

//Hooks
import { useTypedSelector } from "@/hooks/useTypedSelector";
import { useUserActions } from "@/hooks/useUserActions";
import { useModalActions } from "@/hooks/useModalActions";

//Components
import { TextField, Button } from "@mui/material";

//Types
import { IValueState } from "@/types/types";
import { useCustomForm } from "@/hooks/useCustomForm";

//Icons
import { AiFillCloseCircle } from "react-icons/ai";

//Styles
import styles from "@/styles/modals.module.css";

const ModalLogIn: FC = () => {
  const { modalLogIn } = useTypedSelector(state => state.modals);
  const { functionLogInUser } = useUserActions();
  const { changeModalClasses } = useModalActions();

  const { onChangeModalLogInStatus, onChangeModalSignUpStatus } =
    useModalActions();

  const {
    reset,
    isValid,
    getValues,
    handleSubmit,
    returnInputProperties,
    returnInputError,
    errors,
  } = useCustomForm();

  useEffect(() => {
    !modalLogIn && reset();
  }, [modalLogIn, reset]);

  const submitForm = (values: IValueState) => values;

  const onHandleFunction = () => {
    const { email, password, name, phoneNumber, surname } = getValues();

    functionLogInUser({ email, password, name, reset, phoneNumber, surname });
  };

  const onChangeModalsStatus = () => {
    onChangeModalLogInStatus(false);

    const modalTimer = setTimeout(() => {
      onChangeModalSignUpStatus(true);
      clearTimeout(modalTimer);
    }, 300);
  };

  const modalWrapper = changeModalClasses({
    modalStatus: modalLogIn,
    modalClass: styles.modalWrapper,
    modalActiveClass: styles.modalWrapperActive,
  });

  const modalContent = changeModalClasses({
    modalStatus: modalLogIn,
    modalClass: styles.modalContent,
    modalActiveClass: styles.modalContentActive,
  });

  return (
    <div
      onClick={() => onChangeModalLogInStatus(false)}
      className={modalWrapper}
    >
      <form
        onSubmit={isValid ? handleSubmit(submitForm) : undefined}
        onClick={e => e.stopPropagation()}
        className={modalContent}
      >
        <div className={styles.closeModal}>
          <AiFillCloseCircle onClick={() => onChangeModalLogInStatus(false)} />
        </div>

        <h1>Log In</h1>

        <label>
          <TextField
            label="Email:"
            variant="filled"
            type="email"
            color="warning"
            {...returnInputProperties("email")}
            error={errors["email"] ? true : false}
            helperText={returnInputError("email")}
          />
        </label>

        <label>
          <TextField
            label="Password:"
            variant="filled"
            type="password"
            color="warning"
            {...returnInputProperties("password")}
            error={errors["password"] ? true : false}
            helperText={returnInputError("password")}
          />
        </label>

        <div className={styles.modalContentButtons}>
          <Button type="submit" disabled={!isValid} onClick={onHandleFunction}>
            Log In
          </Button>

          <span>or</span>

          <Button onClick={onChangeModalsStatus}>Sign Up</Button>
        </div>
      </form>
    </div>
  );
};

export { ModalLogIn };
